
function useMenuDrag(containerRef, data) {
    let currentComponent = null
    //开始拖动时需要给画布内容区域绑定拖动进入、拖动移入、拖动离开、鼠标放下事件
    //需要拿到当前的元素组件配置并存放
    //这个事件绑定在左侧的物料子组件上，由当前父组件进行触发
    const dragstart = (component) => {
        containerRef.value.addEventListener("dragenter", dragenter)
        containerRef.value.addEventListener("dragover", dragover)
        containerRef.value.addEventListener("dragleave", dragleave)
        containerRef.value.addEventListener("drop", drop)
        currentComponent = component
    }
    //当目标元素进入画布内容区域时，改变鼠标的图标状态
    const dragenter = (e) => {
        e.dataTransfer.dropEffect = "move"
    }
    //当目标元素在内容区域元素之上移动不松手时触发，需要移除鼠标的一个默认行为
    const dragover = (e) => {
        e.preventDefault();
    }
    //当目标元素离开画布内容区域时，改变鼠标的图标状态
    const dragleave = (e) => {
        e.dataTransfer.dropEffect = "none"
    }
    //鼠标松手时，需要新增组件，通过事件e可以拿到当前元素在画布内容中的位置,
    //并结合dragstart事件中保留的当前移动组件配置构建成一个新的组件配置插入到数据源中
    const drop = (e) => {
        const blocks = data.value.blocks
        data.value = {
            ...data.value, blocks: [
                ...blocks, {
                    top: e.offsetY,
                    left: e.offsetX,
                    zIndex: 1,
                    key: currentComponent.key,
                    alignCenter: true
                }]
        }
        currentComponent = null
    }

    //拖动结束销毁事件
    const dragend = () => {
        containerRef.value.removeEventListener("dragenter", dragenter)
        containerRef.value.removeEventListener("dragover", dragover)
        containerRef.value.removeEventListener("dragleave", dragleave)
        containerRef.value.removeEventListener("drop", drop)
    }
    //当拖动元素组件渲染时，控制鼠标在当前组件中的位置，让其居中在元素中间
    const changeBlockPosition = (config) => {
        const { offsetWidth, offsetHeight, block } = config
        block.left = block.left - offsetWidth / 2
        block.top = block.top - offsetHeight / 2
        block.alignCenter = false
        block.width=config.width
        block.height=config.height
    }
    return {
        dragstart,
        dragend,
        changeBlockPosition
    }
}

export default useMenuDrag